<!-- 商品管理1 未完成 -->
<template>
  <div id="template">
    <page-main>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品列表" name="goods">
          <avue-crud
            v-model="Main_Form"
            :option="Main_Option"
            :data="Main_Data"
            :page.sync="Main_Page"
            :search.sync="Main_search"
            :table-loading="main_table_loading"
            ref="crud"
            @refresh-change="refreshChange"
            @search-change="searchChange"
            @reset-change="resetChange"
            @row-save="rowSave"
            @row-update="rowUpdate"
            @size-change="sizeChange"
            @current-change="currentChange"
          >
          <template slot="menu" slot-scope="{ row, size }">
            <el-button type="text" :size="size"  @click="handlerEdit(row)">编辑</el-button>
            <el-button type="text" :size="size"  @click="rowDel(row)">删除</el-button>
          </template>
            <!-- 商品图插槽 -->
            <template v-slot:defaultImg="{ row }">
              <el-image
                v-if="row.defaultImg"
                :src="row.defaultImg"

                style="width: 50px; height: 50px;"
              ></el-image>
              <span v-else>暂无商品图</span>
            </template>
            <!-- :preview-src-list="[process.env.VUE_APP_API_ROOT + 'tube/admin/upload' + row.defaultImg] -->
            
            <!-- 商品类别插槽 -->
            <template slot="decsForm">
              <avue-ueditor
                v-model="decsContent"
                v-bind="descEditorOption"
              ></avue-ueditor>
            </template>
          </avue-crud>
        </el-tab-pane>
      </el-tabs>
    </page-main>
  </div>
</template>

<script>
import { Main_Option, Main_Data } from "./config";
import {
  queryProductsInfoApi,
  createProductsInfoApi,
  updateProductsInfoApi,
  deleteProductsInfoApi,
} from "@/api/productsManage/index";

export default {
  data() {
    return {
      Main_Option,
      Main_Data,
      main_table_loading: false,
      Main_Form: {},
      Main_search: {},
      Main_Page: {
        currentPage: 1,
        pageSize: 10,
        total: 1,
      },
      activeName: "goods",
      //
      decsContent: "",
      descEditorOption: {
        //普通上传地址
        action: process.env.VUE_APP_API_ROOT + "tube/admin/upload",
        propsHttp: {
          home:'',
          url:'data',
          res: ''
        },
        //七牛云oss配置
        qiniu: {
          AK: "",
          SK: "",
          scope: "",
          url: "",
          deadline: 1
        },

      },
    };
  },
  mounted() {
    this.getHomePageInfoFunc();
  },
  methods: {
    /*
     * 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
     * 主体操作函数
     */
    // 搜索事件
    async searchChange(params, done) {
      this.Main_Page.currentPage = 1;
      this.Main_Page.pageSize = 10;
      await this.getHomePageInfoFunc();
      done();
    },
    // 重置
    resetChange() {
      this.Main_search = {};
    },
    // 刷新
    refreshChange() {
      this.Main_Page.currentPage = 1;
      this.getHomePageInfoFunc();
    },
    // 页数变化
    currentChange(val) {
      this.Main_Page.currentPage = val;
      this.getHomePageInfoFunc();
    },
    // 条数变化
    sizeChange(val) {
      this.Main_Page.pageSize = val;
      this.getHomePageInfoFunc();
    },
    // 编辑按钮 - 事件
    handlerEdit (row) {
        this.$refs.crud.rowEdit(row);
        this.decsContent = row?.decs ?? "";
    },
    // 新增
    rowSave(form, done, loading) {
      console.log("form: ", form);
      loading();
      const { classesTitle, decs, defaultImg, price, sort, title, inventory } =
        form;
      this.createProductsInfoFunc(
        {
          classesTitle,
          decs,
          defaultImg,
          price,
          sort: sort == "" ? 0 : sort,
          title,
          inventory,
        },
        done,
        loading
      );
    },
    // 信息修改
    rowUpdate(row, index, done, loading) {
      console.log("row: ", row);
      const {
        id,
        title,
        defaultImg,
        decs,
        price,
        classesTitle,
        inventory,
        sort,
      } = row;
      this.updateProductsFunc(
        {
          id,
          title,
          defaultImg,
          decs: this.decsContent ?? "",
          price,
          classesTitle,
          inventory,
          sort: sort == "" ? 0 : sort,
        },
        done,
        loading
      );
    },
    //删除
    rowDel(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteProductsInfoFunc({ id: row?.id ?? "" });
      });
    },
    //
    handleClick(event) {
      console.log(event, "<==== handleClick");
    },

    /*
     * 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
     * 接口函数
     */
    // 查询
    async getHomePageInfoFunc() {
      this.main_table_loading = true;
      //获取商品信息
      const response = await queryProductsInfoApi({
        ...this.Main_search,
        currentPage: this?.Main_Page?.currentPage ?? 1,
        pageSize: this?.Main_Page?.pageSize ?? 10,
      }).catch(() => {});

      console.log("🚀🚀🚀🚀🚀");
      console.log(response, "<==========ProductsResponse");
      console.log("🚀🚀🚀🚀🚀");

      if (response?.code === 200) {
        const _data = response?.data?.records?.map((_item) => {
          if (_item?.classes) {
            _item.classesTitle = _item?.classes.map((_class) => _class.id);
          }
          if (_item?.sort == 0) _item.sort = "";
          console.log(_item.sort, "<=====_item.sort");
          // 返回处理后的_item
          return _item;
        });

        this.Main_Data = _data;
        this.Main_Page.total = response?.data?.total ?? 0;
      } else {
        this.Main_Data = [];
        this.Main_Page.total = 0;
      }
      this.main_table_loading = false;
    },

    // 新增
    async createProductsInfoFunc(data, done, loading) {
      const response = await createProductsInfoApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "新增成功" });
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },

    // 编辑
    async updateProductsFunc(data, done, loading) {
      const response = await updateProductsInfoApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "编辑成功" });
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },

    // 删除
    async deleteProductsInfoFunc(data) {
      const loadding = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const response = await deleteProductsInfoApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "删除成功" });
        this.Main_Page.currentPage = 1;
        this.getHomePageInfoFunc();
      }
      loadding.close();
    },
  },
};
</script>

<!-- <style>

  </style> -->
